<template>
	<div class="crMDetails">
        <div class="title clear">
            <h4 class="left">监测详情</h4>
            <div class="goback right" @click="$router.go(-1)">&#171; 返回</div>
        </div>
        <div class="toolbar">
            <div class="">
                <el-date-picker
                    v-model="value7"
                    type="daterange"
                    size="small"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2">
                </el-date-picker>
            </div>
        </div>
        <div class="">
            <!-- <el-table :data="RESDATA" v-loading="listLoading" stripe style="width: 100%;">
                <el-table-column prop="product_name" label="侵权作品名称">
                </el-table-column>
                <el-table-column prop="site_name" label="盗版网站名称">
                </el-table-column>
                <el-table-column label="盗版链接" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <a class="links" :href="scope.row.url" target="_blank" v-text="scope.row.url"></a>
                    </template>
                </el-table-column>
                <el-table-column prop="unauth_name" label="盗版内容名称">
                </el-table-column>
                <el-table-column prop="add_time" width="120" label="上传时间">
                </el-table-column>
                <el-table-column prop="status_str" label="审核状态">
                </el-table-column>
                <el-table-column label="操作" width="110px">
                    <template slot-scope="scope">
                        <span class="span-hover" @click="unauthEditFn(scope.$index, scope.row)">编辑</span>
                        <span class="span-hover" @click="unauthDelFn(scope.$index, scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table> -->
            <!--分页-->
            {{RESDATA}}
            <div class="block-pageination clear">
                <el-pagination background class="right" @current-change="handleCurrentChange" :page-size="10" layout="prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>
	</div>
</template>

<script>
import { requiresGetdetail, } from "@/api";
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            RESDATA: [],
            page: 1,
            total: 10,
            listLoading: false,
            requires_id: null,
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value7: ''
        };
    },
    computed: {
        ...mapState([
            'croUser',
        ]),
    },
    mounted(){
        this.user_id = this.croUser.user_id || null;
        this.requires_id = this.$route.params.requires_id;
        this.getRESDATA();
    },
    methods: {
        ...mapMutations([
            'OUT_LOGIN',
        ]),
        

        // 分页
        handleCurrentChange(val) {
            this.page = val;
            this.getRESDATA();
        },
        getRESDATA(){
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
			}
            let para = {
                user_id: this.user_id,
                requires_id: this.requires_id,
                // page: this.page
            };
            requiresGetdetail(para).then(res => {
                if(res.data){
                    this.RESDATA = res.data;
                    // this.total = res.total;
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.$message.error(res.msg);
                }
            });
        },
    }
};
</script>
<style scoped lang="scss">
.crMDetails {
    .title {
    }
    .toolbar {
        background: #f2f2f2;
        padding: 10px;
        //border:1px solid #dfe6ec;
        margin: 10px 0px;
    }
    .goback {
        cursor: pointer;
        color: #2c8bd1;
        font-size: 14px;
    }
}
</style>
